<template>
    <!-- <canvas ref="canvasDom" id="canvasDom"></canvas> -->
        <div id="screen"></div>
    </template>
    
    
    <script setup>
    import * as THREE from 'three';
    import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls';
    import Base from '@/utils/base';
    import { onMounted } from 'vue';
    
    const base = new Base();
    
    onMounted (()=>{
        document.getElementById("screen").appendChild( base.renderer.domElement );
        createBox();
        base.addAmbientLight();
        const dirLight = base.addDirLight(0.5);
        dirLight.position.set(-5, -10, 0);        
        base.update();

        const controls = new OrbitControls(base.camera, base.renderer.domElement);
        controls.addEventListener('change', function(){
            base.renderer.render(base.scene, base.camera);
        });
        base.resize();
    });
    
    // 创建正方体
    const createBox = ()=>{
        let box = new THREE.BoxGeometry(1,1,1);
        let material = new THREE.MeshStandardMaterial({color: 0xff000});
        let mesh = new THREE.Mesh(box, material);
        base.scene.add(mesh);
    }
    
    </script>
    
    
    <style scoped>
    #convasDom{
        width: 100vw;
        height: 100vh;
    }
    </style>